<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转地球</title>

         <style type="text/css">
              .earthTomove{
				  width: 310px;
				  height: 310px;
				  background-image: url(image/earth.png);
				  animation: run 4s linear infinite;
				 
				  border-radius: 160px;
				  /*设置坐标系*/
				  position: relative;
				  
				/* animation: earthTomove 2s infinite; */
				  
				  
			  }
			  
			  /*创建动画，设置参数run动画名称 2s执行时间infinite反复执行
			  它的速度不均匀，前快，后慢不统一，解决方法：参数linear*/
			  @keyframes run{
				  from{left: 0px;}
				  to{left: 200px;}
			  	from{ transform: rotate(0deg);}
			  	to{transform: rotate(360deg);}
			  }
			  
			/*  @keyframes earthTomove{
			  	from{left: 0px;}
			  	to{left: 200px;}
			  } */
			  .earthTomove:hover{
				  /*鼠标移入，地球暂停旋转*/
				  animation-play-state:paused ;/*播放状态 ,暂停*/
			  }
         </style>
	</head>
	<body>
		<h3>转圈圈</h3>
		<div class="earthTomove">
			
		</div>
	</body>
</html>
